<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="订单号" name="outTradeNo">
                <AInput allow-clear v-model:value="state.formData.outTradeNo"></AInput>
            </AFormItem>
            <AFormItem label="手机号" name="mobile">
                <AInput allow-clear v-model:value="state.formData.mobile"></AInput>
            </AFormItem>
            <AFormItem v-if="commonStore.user.roleValue !== 'cashier'" label="门店编号" name="storeCode">
                <AInput allow-clear v-model:value="state.formData.storeCode"></AInput>
            </AFormItem>
            <AFormItem  label="员工工号" name="staffCode">
                <AInput allow-clear v-model:value="state.formData.staffCode"></AInput>
            </AFormItem>
            <AFormItem label="状态" name="status">
                <ASelect allow-clear v-model:value="state.formData.status">
                    <ASelectOption :value="OrderStatusEnum.TOBEPAID">待支付</ASelectOption>
                    <ASelectOption :value="OrderStatusEnum.CANCELED">已取消</ASelectOption>
                    <ASelectOption :value="OrderStatusEnum.PAID">已支付</ASelectOption>
                    <ASelectOption :value="OrderStatusEnum.TOBEREFUNDED">待退款</ASelectOption>
                    <ASelectOption :value="OrderStatusEnum.REFUNDED">已退款</ASelectOption>
                    <ASelectOption :value="OrderStatusEnum.COMPLETED">已完成</ASelectOption>
                    <ASelectOption :value="OrderStatusEnum.USED">已使用</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="日期范围" name="startPayTime">
                <DateRangePicker v-model:start="state.formData.startPayTime"
                            v-model:end="state.formData.endPayTime" />
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false">
            <template #bodyCell="{record,column}">
                
                <template v-if="column.dataIndex=='mobile'">
                    {{ record.customerName}}/{{ record.mobile }}
                </template>
                <template v-if="column.dataIndex=='storeCode'">
                    {{ formatStore(record.storeCode) }}
                </template>
                <template v-if="column.dataIndex=='staffCode'">
                    {{ formatStaff(record.staffCode) }}
                </template>
                
                <template v-if="column.dataIndex=='refund'">
                    {{ record.refund || "-" }}
                </template>
                <template v-if="column.dataIndex=='remark'">
                    {{ record.remark || "-" }}
                </template>
                <template v-if="column.dataIndex=='status'">
                    <span v-if="OrderStatusEnum.TOBEPAID==record.status">待支付</span>
                    <span v-if="OrderStatusEnum.CANCELED==record.status">已取消</span>
                    <span v-if="OrderStatusEnum.PAID==record.status">已支付</span>
                    <span v-if="OrderStatusEnum.TOBEREFUNDED==record.status">待退款</span>
                    <span v-if="OrderStatusEnum.REFUNDED==record.status">已退款</span>
                    <span v-if="OrderStatusEnum.COMPLETED==record.status">已完成</span>
                    <span v-if="OrderStatusEnum.USED == record.status">已使用</span>
                </template>
                <template v-if="column.dataIndex=='actions'">
                    <a-button  type="text" @click="handleDetailOrder(record)">详情</a-button>
                    <a-button  type="text" @click="handleRefundOrder(record)">退款</a-button>
                </template>
            </template>
        </ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <detailModal v-if="state.detailModalVisibel" :currentData="state.currentOrder" @cancel="state.detailModalVisibel=false"></detailModal>
    <RefundOrder v-if="state.refundVisible" :refundOrderData="state.refundOrderData" ></RefundOrder>
</template>
<script lang="ts" setup>
import {reactive,onMounted,h} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { CommontTypes, OrderStatusEnum, OrderTypes, PageResult, ResponseVo} from "@/type"
import { OrderService } from "@/service/orderService";
import DateRangePicker from "@/components/DateRangePicker/index.vue";
import detailModal from "./components/detailModal.vue"
import useFormat from "@/hooks/useFormat";
import { CommonStore } from "@/store";
import RefundOrder from "./components/refundOrder.vue";

const columns = [
    {title:"订单号",dataIndex:"outTradeNo"},
    {title:"门店",dataIndex:"storeCode"},
    {title:"工号",dataIndex:"staffCode"},
    {title:"用户/手机",dataIndex:"mobile"},
    {title:"销售价格(元)",dataIndex:"salePrice"},
    {title:"支付金额(元)",dataIndex:"total"},
    {title:"退款金额(元)",dataIndex:"refund"},
    {title:"备注",dataIndex:"remark"},
    {title:"订单状态",dataIndex:"status"},
    {title:"支付时间",dataIndex:"payTime"},
    {title:"修改时间",dataIndex:"updateTime"},
    {title:"操作",dataIndex:"actions"}
]

const {formatStore,formatStaff} = useFormat(); 
const commonStore = CommonStore();
const state = reactive<{
    formData: Partial<OrderTypes.OrderParams>,
    pagination:CommontTypes.IPagination,
    dataSource:OrderTypes.OrderItem[],
    detailModalVisibel: boolean,
    currentOrder:Partial<OrderTypes.OrderItem>;
    refundOrderData:Partial<OrderTypes.OrderItem>;
    refundVisible:boolean
}>({
    formData:{
        
    },
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
    detailModalVisibel:false,
    currentOrder:{},
    refundOrderData:{},
    refundVisible: false
})

onMounted(()=>{
    if(commonStore.user.roleValue === "cashier"){
        state.formData.storeCode = commonStore.user.storeCode+"";
    }
    handleSearch()
})

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<OrderTypes.OrderItem>>= await OrderService.page({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

const pageChange = (page:number,size:number)=>{
    state.pagination.pageNum = page;
    state.pagination.pageSize = size;
    handleSearch();
}


const handleReset = ()=>{
    state.formData = {};
}

const handleDetailOrder=async (record:OrderTypes.OrderItem)=>{
    const res:ResponseVo<OrderTypes.OrderItem>= await OrderService.detailOrder({outTradeNo:record.outTradeNo});
        if(res.code===0){
            state.currentOrder = res.data;
            state.detailModalVisibel = true;
        }
}

const handleRefundOrder = async (record:OrderTypes.OrderItem)=>{
    state.refundVisible = true;
    state.refundOrderData = record;
}


</script>